<template>
  <div class="hero-website-startup">
    <div class="header-type-1">
      <div class="header-type-12">
        <div class="pateern">
          <div class="mask">
            <div class="mask2"></div>
            <div class="mask2"></div>
            <div class="mask3"></div>
          </div>
        </div>
        <div class="header">
          <div class="rectangle"></div>
          <div class="wiredunk">FILMACTION</div>
          <div class="button-let-talk">
            <div class="rectangle2"></div>
            <div class="services">Search</div>
          </div>
          <svg
            class="menu"
            width="40"
            height="40"
            viewBox="0 0 40 40"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M8 11H32V13H8V11ZM8 27H32V29H8V27ZM32 19H8V21H32V19Z"
              fill="white"
            />
          </svg>

          <svg
            class="vector"
            width="18"
            height="16"
            viewBox="0 0 18 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M4 0V16M14 0V16M0 4H4M9 8L18 4M0 8H18M0 12H4M14 12H18M1 16H17C17.2652 16 17.5196 15.8946 17.7071 15.7071C17.8946 15.5196 18 15.2652 18 15V1C18 0.734784 17.8946 0.48043 17.7071 0.292893C17.5196 0.105357 17.2652 0 17 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16Z"
              stroke="white"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
    </div>
    <div class="easy-way-to-create-b">视 频 生 成</div>
    <svg
      class="ic-search"
      width="114"
      height="24"
      viewBox="0 0 114 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M108.5 13H107.71L107.43 12.73C108.41 11.59 109 10.11 109 8.5C109 4.91 106.09 2 102.5 2C98.91 2 96 4.91 96 8.5C96 12.09 98.91 15 102.5 15C104.11 15 105.59 14.41 106.73 13.43L107 13.71V14.5L112 19.49L113.49 18L108.5 13ZM102.5 13C100.01 13 98 10.99 98 8.5C98 6.01 100.01 4 102.5 4C104.99 4 107 6.01 107 8.5C107 10.99 104.99 13 102.5 13Z"
        fill="white"
      />
    </svg>

    <div class="_2019-mahameru">© 2023. Filmaction</div>
    <svg
      class="shape2"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M2.74286 0H21.2571C22.7508 0 24 1.24783 24 2.74286V21.2571C24 22.7425 22.7508 24 21.2571 24H2.74286C1.25953 24 0 22.7425 0 21.2571V2.74286C0 1.24852 1.25884 0 2.74286 0ZM20.5714 19.8857C20.6934 19.8857 20.9939 19.7166 21.2571 19.2C21.3056 19.1469 21.2908 18.8058 21.2571 18.5143L17.8286 13.7143C17.9483 13.7426 17.6324 13.5305 17.1429 13.7143C16.9123 13.3884 16.539 13.4626 16.4571 13.7143L13.0286 15.7714C12.6655 16.0673 11.8284 15.9183 11.6571 15.0857L8.22857 10.9714C7.88419 10.4351 7.36585 10.2202 6.85714 10.2857C6.49919 10.3553 6.18852 10.5487 5.89089 10.734C5.75419 10.8191 5.62023 10.9025 5.48571 10.9714L3.42857 18.5143C3.38518 19.0276 3.43631 19.3132 3.42857 19.2C3.77253 19.761 4.038 19.8857 4.11429 19.8857H20.5714Z"
        fill="#DBE1E6"
      />
    </svg>

    <div class="container">
      <div class="block">
        <div class="image">
          <video muted="muted" class="mask6" src="@/assets/mp4/video1.mp4" poster="false.png" autoplay="autoplay" controls="controls" loop="-1"></video>
        </div>
      </div>
      <div class="block">
        <div class="image">                  
          <video muted="muted" class="mask6" src="@/assets/mp4/video2.mp4" poster="false.png" autoplay="autoplay" controls="controls" loop="-1"></video>
        </div>
      </div>
      <div class="block">
        <div class="image">
          <video muted="muted" class="mask6" src="@/assets/mp4/video3.mp4" poster="false.png" autoplay="autoplay" controls="controls" loop="-1"></video>
        </div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary2">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <div class="button-square-2-big-1-primary3">
      <div class="group-12">
        <div class="button"></div>
        <div class="button-text"></div>
      </div>
    </div>
    <router-link to="/cut_movie" class="button-text2">保存</router-link>
    <router-link to="/set_movie" class="button-text3">修改</router-link>
    <router-link to="/" class="button-text4">分享</router-link>
  </div>
</template>
<script>
/* Code generated with AutoHTML Plugin for Figma */

export default {
  name: "HeroWebsiteStartup",
  components: {},
  props: {},
  data() {
    // quickfix to have components available to pass as props
    return {};
  },
};
</script>
<style scoped>
.hero-website-startup,
.hero-website-startup * {
  box-sizing: border-box;
}

.mask6 {
  background: #f2f7fb;
  width: 340px;
  height: 240px;
  border-radius: 10px;
  object-fit: fill;
}
.hero-website-startup {
  background: #ffffff;
  width: 1440px;
  height: 800px;
  position: relative;
  overflow: hidden;
}
.header-type-1 {
  position: absolute;
  inset: 0;
}
.header-type-12 {
  width: 1440px;
  height: 95px;
  position: static;
}
.pateern {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask {
  width: 1440px;
  height: 83px;
  position: static;
}
.mask2 {
  background: #3056d3;
  width: 1440px;
  height: 83px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.mask3 {
  background: #000000;
  border-radius: 130px;
  opacity: 0.10000000149011612;
  width: 1793.68px;
  height: 1184.35px;
  position: absolute;
  left: -1435.28px;
  top: 70.79px;
  transform-origin: 0 0;
  transform: rotate(-45deg) scale(1.413, 0.051);
}
.header {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 15px;
  overflow: hidden;
}
.rectangle {
  width: 1440px;
  height: 80px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.wiredunk {
  color: #ffffff;
  text-align: left;
  font: 700 24px "Montserrat", sans-serif;
  position: absolute;
  left: 131px;
  top: calc(50% - 26px);
}
.button-let-talk {
  width: 142px;
  height: 38px;
  position: absolute;
  left: 1131px;
  top: 11px;
  overflow: hidden;
}
.rectangle2 {
  background: #ffffff;
  border-radius: 30px;
  opacity: 0.10000000149011612;
  width: 142px;
  height: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.services {
  color: #ffffff;
  text-align: left;
  font: 400 16px "Lato", sans-serif;
  position: absolute;
  left: 44px;
  top: 9px;
}
.menu {
  position: absolute;
  left: 1353px;
  top: 9px;
  overflow: visible;
}
.vector {
  position: absolute;
  left: 101px;
  top: 21px;
  overflow: visible;
}
.easy-way-to-create-b {
  color: #212b36;
  text-align: left;
  font: 600 48px "Montserrat", sans-serif;
  position: absolute;
  left: 602px;
  top: calc(50% - 225px);
  width: 235px;
}
.ic-search {
  position: absolute;
  left: 1216px;
  top: 34px;
  overflow: visible;
}
._2019-mahameru {
  color: #a78585;
  text-align: left;
  font: 400 10px/24px "Open Sans", sans-serif;
  position: absolute;
  left: 672px;
  top: calc(50% - -350px);
}
.shape2 {
  position: absolute;
  left: 272px;
  top: 366px;
  overflow: visible;
}
.container {
  padding: 48px 0px 32px 0px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
  width: 1060px;
  height: 311px;
  position: absolute;
  left: 190px;
  top: 253px;
}
.block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.image {
  background: #e8ecf3;
  border-radius: 16px;
  flex-shrink: 0;
  width: 340px;
  height: 256px;
  position: relative;
}
.mask6 {
  background: #f2f7fb;
}
.icon-variants {
  position: absolute;
  left: calc(50% - 48px);
  top: calc(50% - 48px);
  overflow: visible;
}
.icon-variants2 {
  position: absolute;
  left: calc(50% - 48px);
  top: calc(50% - 48px);
  overflow: visible;
}
.icon-variants3 {
  position: absolute;
  left: calc(50% - 48px);
  top: calc(50% - 48px);
  overflow: visible;
}
.button-square-2-big-1-primary {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 561px;
  top: 611px;
}
.group-12 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.button {
  background: #3056d3;
  border-radius: 6px;
  width: 94px;
  height: 41px;
  position: absolute;
  left: 0px;
  top: 0px;
}
.button-text {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 48px;
  left: 46px;
  bottom: 2px;
  top: 15px;
}
.button-square-2-big-1-primary2 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 673px;
  top: 611px;
}
.button-square-2-big-1-primary3 {
  width: 94px;
  height: 41px;
  position: absolute;
  left: 785px;
  top: 611px;
}
.button-text2 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 817px;
  left: 590px;
  bottom: 157px;
  top: 619px;
}
.button-text3 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 704px;
  left: 703px;
  bottom: 157px;
  top: 619px;
}
.button-text4 {
  color: #ffffff;
  text-align: center;
  font: 600 16px/24px "Manrope", sans-serif;
  position: absolute;
  right: 592px;
  left: 815px;
  bottom: 157px;
  top: 619px;
}
</style>
